<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简化版API测试页面</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
        .section { margin-bottom: 20px; padding: 20px; border: 1px solid #ddd; border-radius: 8px; }
        input, button { margin: 8px 0; padding: 8px; width: 100%; box-sizing: border-box; }
        button { background-color: #4CAF50; color: white; border: none; cursor: pointer; }
        #response { margin-top: 20px; padding: 10px; background-color: #f5f5f5; border-radius: 4px; white-space: pre-wrap; }
    </style>
</head>
<body>
    <h1>简化版API测试页面</h1>
    
    <div class="section">
        <h2>用户注册</h2>
        <form id="registerForm">
            <input type="text" id="registerUsername" placeholder="用户名" required>
            <input type="password" id="registerPassword" placeholder="密码" required>
            <input type="email" id="registerEmail" placeholder="邮箱">
            <button type="submit">注册</button>
        </form>
    </div>

    <div class="section">
        <h2>用户登录</h2>
        <form id="loginForm">
            <input type="text" id="loginUsername" placeholder="用户名" required>
            <input type="password" id="loginPassword" placeholder="密码" required>
            <button type="submit">登录</button>
        </form>
    </div>

    <div class="section">
        <h2>API响应结果</h2>
        <pre id="response"></pre>
    </div>

    <script>
        // 显示API响应结果
        function showResponse(response) {
            const responseElement = document.getElementById('response');
            responseElement.textContent = JSON.stringify(response, null, 2);
        }

        // 处理AJAX请求
        async function handleRequest(url, method, data) {
            try {
                const response = await fetch(url, {
                    method: method,
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: data ? JSON.stringify(data) : null
                });
                const result = await response.json();
                showResponse(result);
                return result;
            } catch (error) {
                showResponse({ error: error.message });
            }
        }

        // 用户注册
        document.getElementById('registerForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            const data = {
                username: document.getElementById('registerUsername').value,
                password: document.getElementById('registerPassword').value,
                email: document.getElementById('registerEmail').value
            };
            await handleRequest('/knowledge-qa/api/auth/register', 'POST', data);
        });

        // 用户登录
        document.getElementById('loginForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            const data = {
                username: document.getElementById('loginUsername').value,
                password: document.getElementById('loginPassword').value
            };
            await handleRequest('/knowledge-qa/api/auth/login', 'POST', data);
        });
    </script>
</body>
</html>